import React, { Suspense } from 'react'
import {
  BrowserRouter as Router,
  Redirect,
  Switch,
  Route,
} from 'react-router-dom'
import AuthRoute from '@/components/AutnRoute'
const Login = React.lazy(() => import('@/pages/Login/index'))
const Home = React.lazy(() => import('@/pages/Layout/index'))
const Edit = React.lazy(() => import('@/pages/profile/Edit/index'))
const Chat = React.lazy(() => import('@/pages/profile/Chat/index'))
const NotFound = React.lazy(() => import('@/components/NotFound/index'))
export default function App() {
  return (
    <Router>
      <div className="App">
        <Suspense fallback={<div>...login</div>}>
          <Switch>
            <Redirect exact from="/" to="/home"></Redirect>
            <Route path="/login" component={Login}></Route>
            <Route path="/home" component={Home}></Route>
            <AuthRoute path="/profile/edit" exact component={Edit}></AuthRoute>
            <AuthRoute path="/profile/chat" exact component={Chat}></AuthRoute>
            <Route component={NotFound}></Route>
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}
